<template>
  <view class="mh100 pb115 bfa">
    <!-- 绑定信息展示 -->
    <view class="p23" v-if="isBound">
      <view class="bf p3 bs15 t-c info-card">
        <view class="f32 c-tip">当前绑定</view>
        <view class="f40 wei mt20" style="color: #FDC547">{{ boundName }}</view>
        <view class="f28 c-tip mt20">授权ID：{{ currentAuthId }}</view>
      </view>
    </view>

    <!-- 授权操作区 -->
    <view class="p23">
      <view class="bf p3 bs15 input-card">
        <mg-input
          v-model="newAuthId"
          isr="1"
          :ht="isBound ? '新授权ID' : '授权ID'"
          htc="c3 f30"
          :pr="isBound ? '请输入新的授权ID' : '请输入16位数字授权ID'"
          icn="t-r"
          t="number"
          maxlength="16"
        />
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="foot-btnc p-r" style="padding-top: 40rpx">
      <button 
        @click="handleSubmit"
        :disabled="loading"
        :class="['foot-btn', { 'update-btn': isBound }]"
        :style="{ 
          background: isBound ? '#fff' : '#FDC547',
          border: isBound ? '1px solid #FDC547' : 'none'
        }"
      >
        <text :style="{ color: isBound ? '#FDC547' : '#fff' }">
          {{ isBound ? '更新授权' : '立即绑定' }}
        </text>
        <text v-if="loading" class="iconfont icon-loading rotate"></text>
      </button>
    </view>

    <mg-load v-if="showloading" type="2"></mg-load>
  </view>
</template>

<script>
import { utilMixins } from '@/common/util-mixins.js';
import mgInput from '@/components/form/mg-input.vue';

export default {
  mixins: [utilMixins],
  components: { mgInput },
  data() {
    return {
      showloading: false,
      loading: false,
      newAuthId: '',        // 新授权ID输入
      currentAuthId: '',     // 当前生效的授权ID
      isBound: false,        // 绑定状态
      boundName: '演示商户'  // 商户名称
    };
  },
  mounted() {
    this.checkBoundStatus();
  },
  methods: {
    // 初始化检查绑定状态
    async checkBoundStatus() {
      try {
        // 模拟接口请求
        const res = await this.mockStatusRequest();
        if (res.code === 1) {
          this.isBound = true;
          this.boundName = res.data.merchantName;
          this.currentAuthId = res.data.authId;
        }
      } catch (e) {
        console.error('获取绑定状态失败:', e);
      }
    },

    // 提交处理
    async handleSubmit() {
      if (!this.validateInput()) return;

      this.loading = true;
      try {
        const res = await this.processAuthorization();
        this.handleResponse(res);
      } catch (e) {
        this.util.message('操作失败，请稍后重试', 3);
      } finally {
        this.loading = false;
      }
    },

    // 输入验证
    validateInput() {
      if (!this.newAuthId.trim()) {
        this.util.message('请输入授权ID', 3);
        return false;
      }
      if (!/^\d{16}$/.test(this.newAuthId)) {
        this.util.message('请输入16位数字授权ID', 3);
        return false;
      }
      if (this.newAuthId === this.currentAuthId) {
        this.util.message('请使用新的授权ID', 3);
        return false;
      }
      return true;
    },

    // 处理授权请求
    async processAuthorization() {
      return new Promise((resolve) => {
        setTimeout(() => {
          if (this.newAuthId === '1234567890123456') {
            resolve({
              code: 1,
              data: { 
                merchantName: '旗舰体验店',
                authId: this.newAuthId
              }
            });
          } else if (this.newAuthId === '1') {
            resolve({
              code: 1,
              data: {
                merchantName: '演示商户',
                authId: this.newAuthId
              }
            });
          } else {
            resolve({ code: 0, msg: '无效的授权ID' });
          }
        }, 800);
      });
    },

    // 处理响应结果
    handleResponse(res) {
      if (res.code === 1) {
        this.isBound = true;
        this.boundName = res.data.merchantName;
        this.currentAuthId = this.newAuthId;
        this.newAuthId = '';
        this.util.message('操作成功', 1);
      } else {
        this.util.message(res.msg || '授权验证失败', 3);
      }
    },

    // 模拟状态请求
    mockStatusRequest() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            code: 1,
            data: {
              merchantName: '演示商户',
              authId: '0000000000000001'
            }
          });
        }, 500);
      });
    }
  }
};
</script>

<style scoped lang="scss">
/* 信息卡片样式 */
.info-card {
  background: linear-gradient(145deg, #fff8e1, #fff);
  border: 1px solid rgba(253,197,71,0.2);
}

/* 输入卡片样式 */
.input-card {
  background: #fff;
  border: 1px solid #eee;
}

/* 按钮基础样式 */
.foot-btn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  transition: all 0.3s;
}

/* 旋转动画 */
@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotate {
  animation: rotating 1s linear infinite;
}

.c-tip {
  color: #95a5a6;
}

/* 更新按钮文字颜色 */
.update-btn {
  background: #fff !important;
}
</style>